La animación creada consiste en una pelota que se mueve dentro de un canvas y rebota al tocar los bordes.

Para lograr esto se utilizan:

Coordenadas (x, y) para ubicar la pelota
Velocidad (dx, dy) para el movimiento
Condicionales para detectar colisiones
La función requestAnimationFrame para animar continuamente

1. El Plano Cartesiano del Canvas

• En programación web, las coordenadas funcionan distinto a las matemáticas tradicionales (el eje Y está invertido).
• Qué mostrar: Un rectángulo negro que represente el Canvas.
• Detalles clave: * Una flecha que apunte hacia la derecha para el Eje X+.
• Una flecha que apunte hacia abajo para el Eje Y+.
• Un punto en la esquina superior izquierda marcado como (0,0).
• Por qué ayuda: Evita que el estudiante se confunda al ver que para "bajar" la pelota, sumamos valor a la y.
  

2. Esquema de "Caja de Colisión" (Bounding Box)

• Una imagen que explique por qué la pelota rebota antes de tocar el borde con su centro.
• Qué mostrar: Una pelota tocando el borde derecho del canvas.
• Detalles clave:
• Una línea desde el centro de la pelota hasta el borde marcada como radio.
• La fórmula lógica: Si (x + radio > ancho_canvas) { rebota }.
• Por qué ayuda: Visualiza la lógica matemática del if que escribimos en el JavaScript.

3. Diagrama de Flujo del "Game Loop"

• La animación no es un video, es un dibujo que se borra y se vuelve a pintar 60 veces por segundo.
• Qué mostrar: Un ciclo infinito con flechas.
• Pasos del ciclo:
• Borrar: Limpiar el frame anterior (fillRect con opacidad).
• Actualizar: Calcular nueva posición (x + dx).
• Dibujar: Pintar la pelota en la nueva posición.
• Repetir: requestAnimationFrame.
• Por qué ayuda: Es el concepto base de cualquier videojuego o animación interactiva.